<template>
	<view>
		<view class="fm_box">
			<u-image width="100%" height="430rpx" :src="taskInfo.image"></u-image>
			<view class="movie_name mdx-center-xs">
				{{taskInfo.film_name||''}}
			</view>
		</view>
		<view class="mdx-center-min modeBox u-p-20">
			<view class="active_title">
				{{taskInfo.activity_name||''}}
			</view>
			<!-- 活动时间 -->
			<view class="actEndtime">
				活动时间：
			</view>
			<view class="actEndtime u-margin-top-10">
				{{taskInfo.start_time||''}} - {{taskInfo.end_time}}
			</view>

		</view>
		<!-- 任务状态 -->
		<view class="modeBox mdx-center-min state_box">
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">任务状态</view>
				<view class="right">{{state}}</view>
			</view>

			<view class="u-flex stateLines u-flex u-row-between" v-if="taskNmber.money_sum">
				<view class="left">总资金</view>
				<view class="right">{{taskNmber.money_sum}}</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between" v-if="taskNmber.money_residue">
				<view class="left">剩余资金</view>
				<view class="right">{{taskNmber.money_residue}}</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between" v-if="taskNmber.numbers">
				<view class="left">总票数</view>
				<view class="right">{{taskNmber.numbers}}</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between" v-if="taskNmber.surplus">
				<view class="left">剩余票数</view>
				<view class="right">{{taskNmber.surplus}}</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between" v-if="taskInfo.platformcity">
				<view class="left">购票平台</view>
				<view class="right">{{taskInfo.platformcity}}</view>
			</view>
		</view>
		<!-- 场次分布 -->
		<view class="modeBox mdx-center-min" style="border-radius: 10rpx;" v-if="sessionList.length">
			<view class="u-flex top_th">
				<view class="lwidth">场次分布</view>
				<view class="mwidth">场次个数</view>
				<view class="mwidth">团长佣金</view>
				<view class="mwidth">团员佣金</view>
			</view>
			<view>
				<u-table class="" padding='20rpx 0'>

					<template>
						<view v-for="(item,index) in sessionList" :key='index'>
							<u-tr>
								<u-td>{{item.key}}</u-td>
							</u-tr>
							<view v-for="(row,indx) in item.data" :key='indx'>
								<u-tr>
									<u-td :tdStyle='tdStyle' width='40%'>{{row.time}}</u-td>
									<u-td :tdStyle='tdStyle' width="20%">{{row.number}}个</u-td>
									<u-td :tdStyle='tdStyle' width="20%">{{taskInfo.tz_yj}}元/张</u-td>
									<u-td :tdStyle='tdStyle' width="20%">{{taskInfo.ty_yj}}元/人</u-td>
								</u-tr>
							</view>
						</view>
					</template>

				</u-table>
			</view>
		</view>

		<!-- 活动要求 -->
		<view class="modeBox mdx-center-min u-padding-20" v-if="taskInfo.rule">
			<view class="actTitle">
				活动要求
			</view>
			<view class="">
				<u-parse :html="taskInfo.rule" :selectable="true"></u-parse>
			</view>
		</view>


		<!-- <view class="" >
			<view style="padding-top: 100rpx;">
				<u-empty icon-size="200" text="失败原因失败原因" src="/static/images/fail.png"></u-empty>
			</view>
		</view> -->
		<!-- 失败原因失败原因 -->
		<!-- 失败原因失败原因 -->
		<u-gap height="180"></u-gap>
		<!-- 领取状态 -->
		<view class="mdx-center-xs bottom_pay">
			<u-button :custom-style="customStyle" :hair-line='false' @click="lingQuFaBu">{{type==3?'重新领取':'领取'}}
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgsrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.zlook.com%2Fuploadfile%2F2019%2F0412%2F20190412035854568.jpg&refer=http%3A%2F%2Fnews.zlook.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624695312&t=8ce226dff4e7c9bf44a47d00149d7b6c',
				tdStyle: {
					"padding": '10rpx 0'
				},
				customStyle: {
					color: 'red',
					background: '#FFEC3E',
					color: "#000",
					border: '#fff'
				},
				customNone: {
					color: "#999",
					fontWeight: '550'
				},
				//状态 1 领取，2审核失败 ，3 确认提现
				type: 1,

				id: 0,
				taskInfo: [], //任务信息
				sessionList: [], //场次信息
				taskNmber: [],
				state: '' //任务状态

			}
		},
		onLoad(option) {
			this.id = option.id || 0
			this.state = option.static || ''
			this.getInfo();
			uni.removeStorage({
				key: 'ptText'
			})
		},
		methods: {
			getInfo() {
				this.$http.get('api/Tactivity/activinfo', {
					id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.taskInfo = res.data.activ
						this.sessionList = res.data.list
						this.taskNmber = res.data.rwxx
					} else {

					}
				})
			},
			//领取任务
			lingQuFaBu() {
				uni.setStorage({
					key: 'taskInfo',
					data: this.taskInfo,
					success: () => {
						this.$mHelper.to('/pages/my/myTeam/taskSet/taskSet')
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.fm_box {
		position: relative;
	}

	.movie_name {
		position: absolute;
		bottom: 15rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.active_title {
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #333333;
		font-weight: 550;

	}

	.actEndtime {
		color: #666666;
	}

	.modeBox {
		background-color: #FFFFFF;
		box-shadow: 0 0 10rpx #dddddd;
		border-radius: 10rpx;
		margin-top: 40rpx;
		overflow: hidden;
	}

	.state_box {
		.stateLines {
			width: 94%;
			margin-left: 3%;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #ddd;

			&:last-child {
				border: none;
			}

			.left {
				font-size: 30rpx;
				color: #888888;
			}

			.right {
				text-align: right;
				margin-left: 20rpx;
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
			}
		}
	}

	.top_th {
		background-color: #FFEC3E;
		text-align: center;
		padding: 25rpx 0;
	}

	.lwidth {
		width: 40%;
	}

	.mwidth {
		width: 20%;
	}

	.actTitle {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 550;
	}

	.bottom_pay {
		position: fixed;
		bottom: 10rpx;
		width: 92%;
	}
</style>
